<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
    <style>
        /* 消除浏览器默认元素的内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 设置背景色 */
        body {
            /* background: rgba(181, 185, 171, 0.959); */
            background: rgba(153, 153, 153, 0.842);
        }

        .Bigbox {
            background: rgb(240, 240, 240);
            position: absolute;
            width: 300px;
            height: 420px;

            /* 居中 */
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);

            box-shadow: 0 0 12px rgba(58, 56, 56, 0.849);
            /* box-shadow: 0 0 12px rgba(255, 215, 39, 0.657); */
            border-radius: 20px;
        }

        /* Bigbox内所有孩子节点都设置为相对布局 */
        .Bigbox .child {

            position: relative;
            margin: 10px 20px 10px 20px;
        }

        .Bigbox input {
            width: 80%;
            height: 18px;
            font-size: 16px;
            /* 将Bigbox内所有input标签去除丑陋的边框 */
            outline: none;
        }

        .Bigbox .padding-class {
            padding: 10px;
        }

        .Bigbox #hi {
            position: fixed;
            top: 5%;
            left: 20%;
        }

        .Bigbox div img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: url('./img/10.jpg') no-repeat center;

            transform: translateX(70%);
            border: 2px solid rgba(255, 215, 39, 0.856);
            margin: 0;
            margin-top: 20px;
            animation: lighting 1.2s linear infinite;
        }

        @keyframes lighting {
            0% {
                box-shadow: 0 0 20px #43376e;
            }

            25% {
                box-shadow: 0 0 6px rgba(255, 215, 39, 0.856);
            }

            50% {
                box-shadow: 0 0 32px #4b9756;
            }

            25% {
                box-shadow: 0 0 6px rgba(255, 215, 39, 0.856);
            }

            100% {
                box-shadow: 0 0 20px #43376e;
            }
        }

        .Bigbox .check p,
        .Bigbox .check #checkbox1 {
            margin-left: auto;
            float: right;
        }

        .Bigbox .check #checkbox1 {
            width: 18.4px;
            height: 18.4px;
            padding: 0;
            background: rgba(200, 201, 168, 0.733);
            border-radius: 2px;
        }


        .Bigbox .check p {
            color: rgba(15, 68, 71, 0.972);
            margin: 10px 0px 10px 0px;
        }

        .Bigbox label {
            float: left;
            margin: 10px;
            color: rgba(15, 68, 71, 0.972);
        }

        .Bigbox input[type="submit"] {
            width: 87%;
            height: 45px;
            background: rgba(13, 122, 129, 0.972);
            border: 0;
            border-radius: 10px;
            color: #fff;
            transition: all 0.5s;
        }

        .Bigbox input[type="submit"]:hover {
            transform: scale(1.1);
            background: rgb(2, 70, 97);
        }

        .Bigbox input[type="text"],
        .Bigbox input[type="password"] {

            background: #fff;
            border: 0;
            border-bottom: 1px solid rgba(82, 80, 80, 0.603);
        }
    </style>
</head>

<body>
    <div class="Bigbox">

        <svg id="hi" t="1620881830154" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="4955" width="32" height="32">
            <path
                d="M526.3 488.9l-142.8 0.3c-0.2 0-0.3-0.1-0.3-0.3l19.2-156c0-0.2-0.1-0.3-0.3-0.3l-71.1 0.2c-0.1 0-0.2 0.1-0.3 0.2l-44 357.4c0 0.2 0.1 0.3 0.3 0.3l71.1-0.2c0.1 0 0.2-0.1 0.3-0.2l16.5-133.8c0-0.1 0.1-0.2 0.3-0.2L518 556c0.2 0 0.3 0.1 0.3 0.3L501.8 690c0 0.2 0.1 0.3 0.3 0.3l71.1-0.2c0.1 0 0.2-0.1 0.3-0.2l44-357.4c0-0.2-0.1-0.3-0.3-0.3l-71.1 0.2c-0.1 0-0.2 0.1-0.3 0.2l-19.2 156.1c0 0.1-0.1 0.2-0.3 0.2zM645.4 690l71.1-0.2c0.1 0 0.2-0.1 0.3-0.2L747 444c0-0.2-0.1-0.3-0.3-0.3l-71.1 0.2c-0.1 0-0.2 0.1-0.3 0.2l-30.2 245.5c0 0.2 0.2 0.4 0.3 0.4zM870 781.4c63.6-69 90-168.3 90-269.4 0-273.5-245.1-489.8-527.6-441.1C263.4 100 100 263.4 70.9 432.4 22.2 714.9 238.5 960 512 960h358.1c0.1 0 0.3-0.1 0.3-0.3-0.1-7.6-2.3-176.3-0.4-178.3z m-67.1 111.4h-288c-225.5 0-399.2-184.2-382.7-409.1 14.5-197.1 179-352.5 379.8-352.5 210.3 0 380.8 170.5 380.8 380.8 0 81.8-26.2 157.2-69.7 219.6-24.5 35.2-20.2 154.5-19.9 160.9 0 0.2-0.1 0.3-0.3 0.3zM725 332c-19.8 0-37.7 15.1-40 33.6-2.3 18.5 11.9 33.5 31.7 33.5 19.8 0 37.7-15.1 40-33.6 2.3-18.6-11.9-33.6-31.7-33.5z"
                fill="#0E0E0E" p-id="4956"></path>
        </svg>
        <div>
            <img src="" alt="">
        </div>

        <label class="child">ID:</label>

        <input class="child padding-class" type="text" id="txt">

        <label class="child" for="">Password:</label>

        <div class="check">
            <div class="child padding-class" id="checkbox1">
                <svg id="gou" t="1620880513442" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2493" width="16" height="16" style="visibility: hidden;">
                    <path
                        d="M289.0752 475.3408l138.3424 263.0656c0 0 224.768-534.6304 579.2768-712.9088-8.6016 127.2832-43.2128 237.568 17.3056 373.3504-155.648 33.8944-475.5456 415.8464-579.2768 602.5216C297.6768 823.296 124.7232 687.5136 3.6864 645.12L289.0752 475.3408z"
                        fill="#707070" p-id="2494"></path>
                </svg>
            </div>

            <p class="child">show:</p>

        </div>

        <input class="child padding-class" type="password" id="password">
        <input class="child" type="submit" value="Log In">
    </div>
    <script>
        var checkbox = document.getElementById("checkbox1");
        var checked = document.getElementById("gou");
        var pwd = document.getElementById("password");
        var txt = document.getElementById("txt");
        var img = document.querySelector("img");
        var flage = 0;
        checkbox.onclick = function () {
            if (flage == "0") {
                pwd.type = 'text';
                flage = "1";
                checked.style = "visibility: visible;";
                img.style = ' background: url("./img/see.jpg") no-repeat center; ';
            }
            else {
                pwd.type = 'password';
                flage = "0";
                checked.style = "visibility: hidden;";
                img.style = ' background: url("./img/notsee.jpg") no-repeat center; ';
            }
        }
        txt.onkeydown = function focus() {
            var length = txt.value.length;
            if (length <= 0) {
                length = 1;
            }
            else if (length >= 20) {
                length = 20;
            }
            img.style = ' background: url("./img/' + length + '.jpg") no-repeat center; ';
        }
        txt.onfocus = focus();
        txt.onblur = function blur() {
            img.style = ' background: url("./img/10.jpg") no-repeat center; ';
        }

        pwd.onfocus = function () {
            if (flage == "0") {
                img.style = ' background: url("./img/notsee.jpg") no-repeat center; ';
            }
            else {
                img.style = ' background: url("./img/see.jpg") no-repeat center; ';
            }
        }
    </script>
</body>

</html>